import React, { PureComponent, Fragment } from 'react';
import { Row, Col, Form, Button, Input, Select, DatePicker, message } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

import styles from './../../../Municipal/Yhgl.less';

import moment from 'moment';
import { connect } from 'dva';
@connect(({ maintain, config, loading }) => ({
  wtlxList: maintain.wtlxList,
}))
class YhglEditForm extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {};
    this.dispatch = this.props.dispatch;
    this.handleWtlxChange = this.handleWtlxChange.bind(this);
  }

  componentDidMount() {
    var p = this.props;
    var r = p.record;
    // this.GetClass();
    // this.handleWtlxChange(r.type);
    this.props.form.setFields({
      clbm: {
        value: r.clbm,
      },
      sbly: {
        value: r.sbly,
      },
      wtlx: {
        value: r.cname + ' ' + r.czname,
      },
      // type: {
      //   value: r.type,
      // },
      // ztype: {
      //   value: r.ztype,
      // },
      scsj: {
        value: r.scsj ? moment(Date(r.scsj.slice(6, -2))) : null,
      },
      sbsj: {
        value: r.sbsj ? moment(Date(r.sbsj.slice(6, -2))) : null,
      },
    });
  }

  /* 获取下拉框初始数据 */

  // 获取"问题类型" 大类
  //  GetClass = () => {
  //   this.dispatch({
  //     type: 'maintain/fetchGetClass',
  //     callback: response => {
  //       if (response.ErrorMessage) {
  //         message.error.error('获取失败');
  //         console.log(response.ErrorMessage);
  //       }
  //     },
  //   });
  // };

  //选择问题类型大类后触发
  handleWtlxChange = value => {
    this.dispatch({
      type: 'maintain/fetchGetZClass',
      payload: {
        id: value,
      },
      callback: response => {
        this.setState({ wtlxZList: response.data });
        this.props.form.setFields({
          ztype: {
            value: '',
          },
        });
        // if (response.status) {
        // } else {
        //   message.error('问题类型子类获取失败');
        //   console.log(response.ErrorMessage);
        // }
      },
    });
  };

  // 点击button
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        var r = this.props.record;
        r.clbm = values.clbm ? values.clbm : '';
        // r.clbm = values.clbm ? values.clbm : '';
        // r.clbm = values.clbm ? values.clbm : '';
        // r.clbm = values.clbm ? values.clbm : '';
        // r.clbm = values.clbm ? values.clbm : '';
        this.dispatch({
          type: 'maintain/fetchYhglEdit',
          payload: {
            pm: r,
          },
          callback: response => {
            if (response.status) {
              message.success('编辑成功');
              this.props.handleCancel(this.props.modalName);
              this.props.GetQueryProblem(this.props.queryCon);
            } else {
              message.error('编辑失败');
              console.log(response.ErrorMessage);
            }
          },
        });
      }
    });
  };

  handleReset = () => {
    this.props.form.resetFields();
    this.props.GetQueryProblem(this.props.queryCon);
  };

  render() {
    var s = this.state;
    var p = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
    };
    // const { wtlxList } = this.props;

    return (
      <Form
        className={styles.yhglQueyForm}
        style={{ padding: '10px 0' }}
        onSubmit={this.handleSubmit}
      >
        <FormItem {...formItemLayout} label="养护单位">
          {getFieldDecorator('clbm')(
            <Select name="clbm">
              {p.yhdwList
                ? p.yhdwList.map(i => (
                    <Option key={i.Id} value={i.Id}>
                      {i.Name}
                    </Option>
                  ))
                : null}
            </Select>
          )}
        </FormItem>

        <FormItem {...formItemLayout} label="问题类型">
          {getFieldDecorator('wtlx')(<Input disabled />)}
        </FormItem>
        {/* <FormItem {...formItemLayout} label="问题类型 大类">
          {getFieldDecorator('type')(
            <Select onChange={this.handleWtlxChange}>
              {p.wtlxList
                ? p.wtlxList.map(i => (
                    <Option key={i.classid} value={i.classid}>
                      {i.cname}
                    </Option>
                  ))
                : null}
            </Select>
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="问题类型 小类">
          {getFieldDecorator('ztype')(
            <Select>
              {s.wtlxZList
                ? s.wtlxZList.map(i => (
                    <Option key={i.Id} value={i.Id}>
                      {i.czname}
                    </Option>
                  ))
                : null}
            </Select>
          )}
        </FormItem> */}

        <FormItem {...formItemLayout} label="上报来源">
          {getFieldDecorator('sbly')(
            <Select disabled>
              {p.sblyList
                ? p.sblyList.map(i => (
                    <Option key={i.Id} value={i.Id}>
                      {i.Title}
                    </Option>
                  ))
                : null}
            </Select>
          )}
        </FormItem>

        {/* <FormItem {...formItemLayout} label="问题状态">
          {getFieldDecorator('wtzt')(
            <Select>
              <Option value="">全部</Option>
              <Option value="任务单">任务单</Option>
              <Option value="巡查">巡查</Option>
              <Option value="城管">城管</Option>
            </Select>
          )}
        </FormItem> */}

        <FormItem {...formItemLayout} label={`超时时间：`}>
          {getFieldDecorator('scsj', {
            rules: [{ required: false, message: '' }],
          })(<DatePicker />)}
        </FormItem>

        <FormItem {...formItemLayout} label="上报时间">
          {getFieldDecorator('sbsj')(<DatePicker />)}
        </FormItem>

        <FormItem wrapperCol={{ span: 22, offset: 8 }}>
          <Button type="primary" htmlType="submit">
            确定
          </Button>
        </FormItem>
      </Form>
    );
  }
}

const YhglEditFm = Form.create()(YhglEditForm);
export default YhglEditFm;
